<template>
  <div class="box-container">
    <div class="box-body">
      <div class="grid-content body-left">
        <div class="body-left-header">
          <search @handleSelected="selection" :processingList="processingConversations"></search>
        </div>
        <div class="menus">
          <div
            class="menu"
            :class="{ 'menu-active': opened == 'PROCESSING' }"
            @click="opened = 'PROCESSING'"
          >
            <i class="el-icon-chat-dot-round"></i>
          </div>
          <div
            class="menu"
            :class="{ 'menu-active': opened == 'PENDING' }"
            @click="opened = 'PENDING'"
          >
            <i class="el-icon-user"></i>
          </div>
        </div>
        <div class="users">
          <processing-group
            v-show="opened == 'PROCESSING'"
            :conversations="processingConversations"
            :selected="currentConversation"
            @handleSelected="selection"
          ></processing-group>
          <pending-group
            v-show="opened == 'PENDING'"
            :conversations="pendingConversations"
            :selected="currentConversation"
            @handleSelected="selection"
          ></pending-group>
        </div>
      </div>
      <div class="grid-content body-center">
        <div class="messages-meta"></div>
        <messageList
          :messages="messages"
          :pagination="pagination"
          :conversation="currentConversation"
          @loadMore="getMsgList"
        ></messageList>
        <msgForm
          :conversation="currentConversation"
          :user_id="user_id"
          @setLatestMsg="setLatestMsg"
          @assign="assign"
          @assignAll="assignAll"
        ></msgForm>
      </div>
      <div class="grid-content body-right">
        <div class="profile">
          <div class="desc">
            <p class="meta">详情</p>
            <div class="desc-body" v-if="currentConversation.guest">
              <p>
                <span class="desc-label">用户名</span>
                <span class="desc-value">{{ currentConversation.guest.name }}</span>
              </p>
              <p>
                <span class="desc-label">UID</span>
                <span class="desc-value">{{ currentConversation.guest_id }}</span>
              </p>
              <p>
                <span class="desc-label location">
                  <i class="el-icon-place"></i>
                </span>
                <span class="desc-value">{{ currentConversation.guest.city }}</span>
              </p>
              <p>
                <span class="desc-label">状态</span>
                <span class="desc-value">
                  <el-tag size="mini" type="success" effect="plain" v-if="isOnline">在线</el-tag>
                  <el-tag size="mini" type="danger" effect="plain" v-else>离线</el-tag>
                </span>
              </p>
              <p>
                <span class="desc-label">VIP</span>
                <span class="desc-value vip-tag" @click="setVip">
                  <i class="el-icon-star-off" v-if="!currentConversation.guest.vip"></i>
                  <i class="el-icon-star-on" v-if="currentConversation.guest.vip"></i>
                </span>
              </p>
            </div>
          </div>
          <div class="note">
            <p class="meta">备注</p>
            <div class="note-body">
              <textarea placeholder="点击输入" v-model="currentConversation.note" @blur="comment"></textarea>
            </div>
          </div>
          <div class="process">
            <p class="meta">操作</p>
            <div class="process-body">
              <el-button
                v-if="currentConversation.status == 'PENDING'"
                type="primary"
                size="small"
                round
                @click="active"
              >接收处理</el-button>
              <el-button
                v-if="currentConversation.status == 'PROCESSING'"
                type="danger"
                size="small"
                round
                @click="close"
              >处理完成</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ws from "../../../socket.js"
import config from "../../../config"
import search from './Search.vue'
import messageList from './MessageList.vue'
import msgForm from './Form.vue'
import pendingGroup from './group/PendingGroup.vue'
import processingGroup from './group/ProcessingGroup.vue'
import { markMsgAsRead } from '../../api/message'
import { guestIsOnline } from '../../api/guest'
import useConversation from '../../composables/useConversation.js'
import { defineComponent, reactive, toRefs, computed, watchEffect, watch, ref } from 'vue'

const state = reactive({
  isOnline: 0,
  user_id: null,
  opened: "PROCESSING",
})

state.user_id = Number(window.sessionStorage.getItem('user_id'))

const {
  close,
  assign,
  assignAll,
  setVip,
  active,
  comment,
  selection,
  getMsgList,
  setLatestMsg,
  loadConversations,
  isCurrentConversation,
  delMsg,
  messages,
  pagination,
  pendingConversations,
  processingConversations,
  currentConversation,
} = useConversation()

watchEffect(() => {
  loadConversations(state.opened)
})

watchEffect(() => {
  if (currentConversation.value.guest) {
    guestIsOnline(currentConversation.value.guest.id).then(result => {
      state.isOnline = result.data
    })
  }
})

let wsUri = `${config.wsUrl}/user/${state.user_id}`
ws.init(wsUri)
ws.onmessage((e) => {
  let data = JSON.parse(e.data)
  if (data.cmd == 'talk') {
    let { type, content, to_uid, chat_id } = data
    const newMsg = { from: 1, type, content }
    let hasRead = false
    if (isCurrentConversation(chat_id)) {
      hasRead = true
      //设置消息已读
      markMsgAsRead(chat_id)
    }
    setLatestMsg(chat_id, newMsg, hasRead)
  }

  if (data.cmd == "offline" && currentConversation.value.guest.id == data.leaver) {
    state.isOnline = 0
  }
})

const { isOnline, user_id, opened } = toRefs(state)

</script>

<style scoped>
.box-container {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
}

.box-body {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: row;
  box-sizing: border-box;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
  background: #fff;
}

.body-center {
  height: 100%;
  flex: auto;
  min-width: 500px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.body-left {
  width: 250px;
  min-width: 250px;
  border-right: 1px solid #ebebeb;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
}

.body-right {
  width: 250px;
  min-width: 250px;
  border-left: 1px solid #ebebeb;
  height: 100%;
}

.messages-meta {
  height: 40px;
  border-bottom: 1px solid rgb(235, 235, 235);
}

.menus {
  display: flex;
  flex-direction: row;
}

.menus .menu {
  flex: auto;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 1px solid rgb(235, 235, 235);
}

.menu-active {
  border-color: #409eff !important;
  color: #409eff;
}

.users {
}

.unread img {
  border-radius: 3px;
}

.body-left-header {
  padding: 7px;
}

.profile {
  padding: 15px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
    helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
    segoe ui emoji, segoe ui symbol, noto color emoji;
}

.profile .meta {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid rgb(235, 235, 235);
  line-height: 30px;
  color: #363636;
  font-size: 13px;
}

.note-body {
  padding-top: 10px;
}

.note-body textarea {
  outline: none;
  resize: none;
  border: none;
  height: 60px;
  width: 100%;
}

.process-body {
  padding-top: 10px;
  text-align: center;
}

.process-body .el-button {
  width: 100%;
  letter-spacing: 2px;
}

.desc-body span {
  display: inline-block;
}

.desc-body .vip-tag {
  font-size: 17px !important;
  cursor: pointer;
}

.desc-body .location {
  font-size: 17px !important;
}

.desc-body .vip-tag .el-icon-star-off {
  color: #aaa;
}

.desc-body .vip-tag .el-icon-star-off:hover {
  color: rgb(247, 186, 42);
}

.desc-body .vip-tag .el-icon-star-on {
  color: rgb(247, 186, 42);
}

.desc-body .vip-tag .el-icon-star-on:hover {
  font-size: 19px;
}

.desc-body .desc-label {
  width: 70px;
  color: rgba(0, 0, 0, 0.45);
}

.desc-body .desc-value {
  color: #409eff;
}

::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #e6e6e6;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}
</style>